<template>
  <div class="home">
    <button @click="show">展示</button>
    <div>{{area}}</div>
    <AreaSelect title="所在地区" v-model="data" :show="dialog" @close="close"/>
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'
import AreaSelect from '@/components/AreaSelect'
export default {
  name: 'Home',
  data () {
    return {
      dialog: false,
      data: [],
      area: ''
    }
  },
  components: {
    AreaSelect
  },
  methods: {
    close () {
      this.dialog = false
    },
    show () {
      this.dialog = true
    }
  },
  watch: {
    data: function (val) {
      const _this = this
      _this.area = ''
      val.forEach(function (value) {
        _this.area += value.name
      })
    }
  }
}
</script>

<style scoped>
.home{
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
}
</style>
